iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
自我挑戰組

我的日常學習雜記與筆記整理系列 第 27

Day - 27 函式引數與參數筆記

  • 分享至 

  • xImage
  •  
  1. JS函式的定義沒有指定函式參數的型別
  2. 函式調用
    1. 不會對傳入的引數值做任何型別檢查
    2. 不檢查傳入的引數個數。

選擇性參數 (Optional Parameters)

函式調用的引數比宣告的參數少時,剩下的參數會被設為 undefined 值。有時想省略一些不是必要性的參數時(optional),為了達成此目的, 就必須為省略掉的參數設定合理的預設值, 如:

function greet(name, greeting = "Hello") {
  console.log(greeting + ", " + name + "!");
}

// 呼叫 greet 函式時提供兩個參數
greet("Alice", "Hi");  // 輸出: "Hi, Alice!"

// 呼叫 greet 函式時只提供一個參數
greet("Bob");  // 輸出: "Hello, Bob!"

function describeFruit(fruitName, color = "unknown") {
  console.log("The " + fruitName + " is " + color + ".");
}

// 呼叫 describeFruit 函式時提供兩個參數
describeFruit("apple", "red");  // 輸出: "The apple is red."

// 呼叫 describeFruit 函式時只提供一個參數,仍可正常運作,因為 `color` 值被設定為"unknown"
describeFruit("banana");  // 輸出: "The banana is unknown."

當要設計有選擇性參數的函式時,則要把選擇性參數放在參數列的最後面,這樣才能被省略。因為函式沒辦法被設計成第一個參數是被忽略而只傳入第二個參數。

可變長度的引數列: Arguments 物件

當定義一個函式時,通常會為該函式指定一些參數。但有時在調用函式時,可能會提供比預期更多的引數。

在此情況下也無法直接通過參數名稱來取得這些額外的引數。但 JavaScript 提供了可以透過名為 arguments 的物件,來取得所有的引數。

arguments 是一種類陣列物件(array-like object)
  • 它的行為與陣列非常相似。
  • 可以使用索引(就像陣列一樣)來取得 arguments 中的元素。
  • arguments 物件有一個 length 屬性,表示引數的數量。
// 參數 fruitName
function describeFruit(fruitName) {
    console.log("Fruit name: " + fruitName);
  
    // 若有提供額外的引數,則輸出這些引數
    for (var i = 1; i < arguments.length; i++) {
        console.log("Extra argument " + i + ": " + arguments[i]);
        /* console.log:
			"Fruit name: apple"
			"Extra argument 1: red"
			"Extra argument 2: sweet"
		*/
    }
}

// 呼叫 describeFruit 函式時提供三個引數
describeFruit("apple", "red", "sweet");  
  • 即使在定義 describeFruit 函式時只指定了一個參數 fruitName,仍然可以在調用該函式時提供更多的引數。可以通過 arguments 物件來取得這些額外的引數。
function myFunction(x) {
  console.log("The first argument is: " + x); // 藉由參數x或arguments來存取第一個引數
  console.log("The second argument is: " + arguments[1]); // 第二、三個引數只能透過arguments來存取
  console.log("The second argument is: " + arguments[2]);
  console.log("The number of arguments is: " + arguments.length);
 // arguments 有 length 屬性: 指明它所包含的元素個數,arguments.length 就看傳進來的引數數量
}

// 使用三個引數調用 myFunction 函式
myFunction("apple", "banana", "cherry");  
// "The first argument is: apple"
// "The second argument is: banana"
// "The second argument is: cherry"
// "The number of arguments is: 3"

myFunction("apple", "banana");  
// "The first argument is: apple"
// "The second argument is: banana"
// "The second argument is: undefined"
// "The number of arguments is: 2"

Arguments 物件去驗證函式調用的引數數目符合預期:

// 書中範例
// 但像這樣檢查引數的數目通常是不必要的,JavaScript 的預設行為: 少掉的引數為 `undefined` , 而多的引數單純被忽略。
function f(x, y, z) {
  // 首先,驗證傳入的引數個數是正確的
  if (arguments.length !== 3) {
    throw new Error('function f called with ' + arguments.length +
      ' arguments, but it expects 3 arguments.');
  }
  // 現在執行實際擷取引數值的程式碼...
}

Arguments 物件重要用途:

寫出可作用在任何數目引數的函式

// 書中範例
function max (/* ... */){
	var max = Number.NEGATIVE_INFINITY;
	//逐一查看引數,找出並記住最大者。
	for(var i = 0; i < arguments.length; i ++){
		if (arguments[i]> max){
			max = arguments[i];
		}
	}
	return max;
}
//回傳最大值
var largest = max(1 , 10, 100, 2, 3, 1000, 4 , 5, 10000, 6); 
console.log(largest); // => 10000

參考資料:

  • JavaScript 大全 第六版, 歐萊禮

上一篇
Day - 26 使用call(), apply() 間接調用函式筆記
下一篇
Day - 28 陣列與類陣列物件
系列文
我的日常學習雜記與筆記整理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言